<template>
    <div>
      <el-container >
        <!--左边-->
        <el-aside :width="homedata.leftwidth+'px'" style="line-height: 60px;border-right: 1px solid gray;padding-left: 20px">
         <span style="font-size: 30px;color: white">
           <template v-if="homedata.leftwidth==200">
              你超可爱の
           </template>
           <template v-else>
              <i class="iconfont icon-ku" style="font-size: 40px;color:white;"></i>
           </template>

           </span>
        </el-aside>
        <el-main>

          <el-row>
            <el-col :span="12">

              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="selectNav" background-color="#409EFF"
                       text-color="#fff" active-text-color="#F4C66E" >
                <el-menu-item index="1">
                  <i :class="['iconfont',isShouqi]" style="font-size: 25px;color: white" ></i>
                </el-menu-item>
                <el-menu-item index="2">系统介绍</el-menu-item>
                <el-menu-item index="3">项目</el-menu-item>
                <el-menu-item index="4">文档</el-menu-item>
                <el-menu-item index="5">博客</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="12" style="display: flex;justify-content: flex-end">

              <el-menu :default-active="ractiveIndex" class="el-menu-demo" mode="horizontal" @select="selectNav2" background-color="#409EFF"
                       text-color="#fff" active-text-color="#F4C66E" >
                <el-menu-item index="1">
                  <el-badge :value="10" style="line-height:20px">
                    <i class="iconfont icon-tixing" style="font-size: 25px;color: white"></i>
                  </el-badge>
                </el-menu-item>
                <el-menu-item index="2">
                  <el-popover placement="bottom" width="300" popper-class="abc" trigger="click" :visible-arrow="false">
                    <UserInfo/>
                    admin
                  <img src="../assets/456.jpg" height="50px" width="50px"
                       style="border-radius: 50px;border: 1px solid white">
                  </el-popover>
                </el-menu-item>

              </el-menu>

            </el-col>
          </el-row>

        </el-main>

      </el-container>

    </div>
</template>

<script>

  import UserInfo from "@/components/UserInfo.vue"
  components:{
    UserInfo
  }
    export default {
      props:["homedata"],
       data(){
         return{
           activeIndex:"1",
           ractiveIndex:"10",
           isShouqi:"icon-shouqi"
         }
       },
        methods:{
         selectNav(key,keyPath){
           if(key==1){
             if(this.isShouqi=="icon-shouqi"){
               this.homedata.leftwidth=100;
               this.isShouqi = "icon-zhankai";
               this.homedata.isCollapse = true;
             }else{
               this.homedata.leftwidth=200;
               this.isShouqi = "icon-shouqi";
               this.homedata.isCollapse = false;
             }

           }

         },
          //选中右边导航
          selectNav2(key,keyPath){
            console.log(key, keyPath);

          }
        }
    }
</script>

<style scoped>
  .el-main{
    padding: 0;
  }

</style>
